<template>
  <div class="global-child-component">
    <h4>子组件 - 全局属性访问演示</h4>
    
    <div class="global-data">
      <h5>访问全局数据:</h5>
      <ul>
        <li><strong>应用名称:</strong> {{ $appInfo.appName }}</li>
        <li><strong>版本:</strong> {{ $appInfo.version }}</li>
        <li><strong>环境:</strong> {{ $appInfo.environment }}</li>
      </ul>
    </div>
    
    <div class="global-methods">
      <h5>使用全局方法:</h5>
      <button @click="callGlobalMessage">调用全局消息方法</button>
      <button @click="callGlobalError">调用全局错误方法</button>
    </div>
    
    <div class="script-access">
      <h5>在脚本中访问:</h5>
      <p>当前应用版本: {{ versionFromScript }}</p>
      <button @click="useInstanceMethod">通过实例访问</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const versionFromScript = ref('')
const internalInstance = getCurrentInstance()

// 在模板中直接使用 $showMessage 和 $showError

// 在脚本中使用全局方法
function callGlobalMessage() {
  $showMessage('这是从子组件调用的全局消息')
}

function callGlobalError() {
  $showError('这是从子组件调用的全局错误')
}

// 通过实例访问全局属性
function useInstanceMethod() {
  if (internalInstance?.proxy) {
    const appInfo = internalInstance.proxy.$appInfo
    internalInstance.proxy.$showMessage(`通过实例访问: ${appInfo.appName} v${appInfo.version}`)
  }
}

onMounted(() => {
  // 组件挂载时获取全局属性
  if (internalInstance?.proxy) {
    versionFromScript.value = internalInstance.proxy.$appInfo.version
  }
})
</script>

<style scoped>
.global-child-component {
  border: 2px solid #f39c12;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff9e6;
}

h4 {
  color: #d68910;
  margin-top: 0;
  border-bottom: 1px solid #f39c12;
  padding-bottom: 10px;
}

h5 {
  color: #7d8c4b;
  margin-bottom: 10px;
}

.global-data,
.global-methods,
.script-access {
  margin-bottom: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 6px;
  border-left: 3px solid #f39c12;
}

.global-data ul {
  margin: 0;
  padding-left: 20px;
}

.global-data li {
  margin: 5px 0;
}

.global-methods button,
.script-access button {
  padding: 8px 16px;
  margin-right: 10px;
  margin-top: 10px;
  background-color: #f39c12;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.global-methods button:last-child {
  background-color: #e74c3c;
}

.global-methods button:hover,
.script-access button:hover {
  opacity: 0.9;
}

.script-access p {
  background-color: #fef9e7;
  padding: 10px;
  border-radius: 4px;
  border-left: 3px solid #f1c40f;
}
</style>